<template>
  <a-layout-header class="header">
    <a :href="'/'" class="logo">知知</a>
    <a-tabs v-model:activeKey="activeKey" class="tabs" tabBarGutter={24}>
      <a-tab-pane key="1" tab="首页" />
      <a-tab-pane key="2" tab="问答" />
      <a-tab-pane key="3" tab="面经" />
      <a-tab-pane key="4" tab="关于我" />
      <a-tab-pane key="5" tab="联系" />
    </a-tabs>
    <div class="auth-section">
      <!-- 未登录时 -->
      <div v-if="!isLoggedIn" class="auth-links">
        <a :href="'/login'" class="auth-link">登录</a>
        <a :href="'/register'" class="auth-link">注册</a>
      </div>

      <!-- 登录后显示 -->
      <div v-else class="user-info">
        <a-tooltip title="通知">
          <a-badge count="5" offset={[0, 6]}>
            <a-notification-outlined style="font-size: 20px; color: #fff;" />
          </a-badge>
        </a-tooltip>
        <a-avatar src="https://joeschmoe.io/api/v1/random" style="margin-left: 16px;" />
      </div>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps<{ isLoggedIn: boolean }>();
const activeKey = ref('1');
const isLoggedIn = props.isLoggedIn;
</script>

<style scoped>
.header {
  background: #ffffff; /* 头部背景为白色 */
  color: #000; /* 头部文字颜色为黑色 */
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid #dcdcdc;
  height: 64px; /* 头部高度 */
}

.logo {
  color: #000;
  font-size: 24px;
  line-height: 64px;
  font-weight: bold;
  text-decoration: none;
  margin-right: auto;
}

.tabs {
  flex: 1;
  margin-right: 24px; /* 确保标签和认证部分之间的间隔 */
}

.ant-tabs {
  height: 100%; /* 确保 tabs 占满 header 高度 */
}

.ant-tabs-bar {
  height: 100%; /* 对齐 header 高度 */
}

.ant-tabs-tab {
  font-size: 18px; /* 调整标签的字体大小 */
  height: 64px; /* 确保标签高度与 header 一致 */
  line-height: 64px; /* 标签文本垂直居中 */
}

.ant-tabs-ink-bar {
  height: 4px; /* 调整下划线高度 */
  background-color: #1890ff; /* 下划线颜色 */
}

.auth-section {
  display: flex;
  align-items: center;
}

.auth-links {
  display: flex;
  align-items: center;
}

.auth-link {
  color: #000;
  margin-right: 16px;
  font-size: 14px;
  line-height: 64px;
}

.auth-link:hover {
  color: #ffeb3b; /* 登录链接的悬停颜色 */
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info .ant-avatar {
  margin-left: 16px;
}
</style>
